import React, { Component } from 'react'
import ComF from './ComF'
import ComG from './ComG'
import ErrorBoundary from './ErrorBoundary'
import Error from './Error'
import HOC from './HOC'
export default class ComE extends Component {
  constructor() {
    super()
    this.state = {
      name: 'Tom',
      age: 18
    }
  }
  changeAge() {
    this.setState({
      age: 20
    })
  }
  changeName() {
    this.setState({
      name: 'Jack'
    })
  }
  render() {
    return (
      <div>
        <p>组件性能优化：1.减少操作dom的此时；2.减少操作dom的数量</p>
        <p>
          1.shouldComponentUpdate 根据情况返回true或者false，减少操作dom的次数
          2.componentWillUnmount 当组件将要卸载时，清空手动添加的定时器、监听等..
          3.PureComponent(class)以及memo(function)，当父组件的数据修改而且子组件使用这个数据时，才会重新渲染
          4.ErrorBoundary将子组件的报错限定在这个组件内部，避免影响其他组件
        </p>
        <ComF age={this.state.age}></ComF>
        <ComG age={this.state.age}></ComG>
        <button onClick={()=>this.changeAge()}>changeAge-{this.state.age}</button>
        <button onClick={()=>this.changeName()}>changeName-{this.state.name}</button>
        <ErrorBoundary>
          {/* ErrorBoundary这个组件中要放一个可能会报错或已经在报错的组件 */}
          <Error></Error>
        </ErrorBoundary>
        <HOC></HOC>
      </div>
    )
  }
}
